<!-- 高龄主机清单 -->
<template> 
  <div class="wrap">
    <span class="title">高龄主机清单</span>
       
  <!-- -->
    <el-col :xs="24" :sm="24" :lg="24">
       <el-table
          stripe
          :data="tableData"
          height="320px"
          border
          style="width: 100%;top:15px">
           <el-table-column label="序号"  width="60" type="index" :index='(index)=>{return (index + 1) + (this.pageNum - 1)*this.pageSize}'> </el-table-column>
          <el-table-column
            prop="TransTime"
            label="上报时间"
            width="160"
            show-overflow-tooltip
            >
          </el-table-column>
          <el-table-column
            prop="generated_assets"
            show-overflow-tooltip
            label="资产名称">
          </el-table-column>
          <el-table-column label="资产总结" show-overflow-tooltip prop="Status" align="left" width="100">
            <template slot-scope="{row}">
              <span style="color:#67C23A" v-show="row.Status === 1">标准资产</span>
              <span style="color:#E6A23C" v-show="row.Status === 2">低配资产</span>
              <span style="color:#F56C6C" v-show="row.Status === 3">高龄资产</span>
              <span style="color:#909399" v-show="row.Status === 4">高龄低配</span>
            </template>
          </el-table-column>
          <el-table-column label="使用年份" show-overflow-tooltip prop="StartDate" align="left"></el-table-column>
          <!-- <el-table-column
            prop="EventLevel"
            label="严重等级"
            show-overflow-tooltip
            width="80">
             <template slot-scope="{row}">
              <span style="color:#F56C6C" v-show="row.EventLevel == '1'">紧急</span>
              <span style="color:#E6A23C" v-show="row.EventLevel == '2'">重要</span>
              <span style="color:#909399" v-show="row.EventLevel == '3'">默认</span>
              <span style="color:#409EFF" v-show="row.EventLevel == '4'">普通</span>
              <span style="color:#67C23A" v-show="row.EventLevel == '5'">告知</span>
            </template>
          </el-table-column>
          
          <el-table-column
            prop="Descp"
            show-overflow-tooltip 
            label="描述信息">
          </el-table-column> -->
        </el-table>
       <!-- <el-pagination 
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange" 
          :current-page=pageNum
          :page-size=pageSize
          background 
          layout="total, prev, pager, sizes, next, jumper"
          :total="total">
        </el-pagination> -->
    </el-col>
  </div>
</template>

<script>
import { GetEventLog } from '@/api/firstPage'
import { connrequest } from "@/api/firstPage";
import barchart from "./barchart.vue";
import { getNowDay, parseTime,formatTime3 } from '@/utils/index.js'

export default {
  components:{barchart},
  data() {
    return {
      list: {xAxis:[],series:[]},
      listTime:[
        {'StartTime':'','EndTime':''}
      ],
      tableData:[],
      pageNum: 1,
      pageSize: 10,
      eventList:[],
      // prevenData:{"EventLogDays":0},
      fmap:'',
	  // barchartData1: {xAxis:[],series:[]},
    }
  },
  props:{
    prevenData:{
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  watch: {
    prevenData: {
      deep: true,
      handler(val) {
        // console.log(val,222);
        this.prevenData = val
        this.getData()
      }
    }
  },
  // created() {
  //   this.getInfo()
    
  // },
  methods: {
    // async getInfo() { 
    //   const res = await connrequest('GetFirstPageParam');
    //   this.prevenData = res.Data || {}
    //   this.getData()
    // },
    // 获取当前日期
    getTimeList(i){
      var today = new Date();
      this.listTime[0].StartTime=formatDate(today, i, true)
      this.listTime[0].EndTime=formatDate(today, 0, false)
      function formatDate(date, daysToAdd, isStart) {
        var newDate = new Date(date);
        newDate.setDate(date.getDate() - daysToAdd);
        
        var year = newDate.getFullYear();
        var month = String(newDate.getMonth() + 1).padStart(2, '0');
        var day = String(newDate.getDate()).padStart(2, '0');
        var hours = isStart ? '00' : '23'; 
        var minutes = isStart ? '00' : '59';
        var seconds = isStart ? '00' : '59';
        return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
      }
    },
    async getData() {
      // this.prevenData.EventLogDays = this.prevenData?.EventLogDays || 7
      this.pageSize = this.prevenData.EventLogTotal
      this.getTimeList(this.prevenData.EventLogDays -1)
      const data = {
        Paging:{
          QueryPageNo: this.pageNum,
          QueryPageLength: this.pageSize
        },
        Filter: {
          // StartTime: this.listTime[0].StartTime,
          // EndTime: this.listTime[0].EndTime,
          // Level:this.prevenData.EventLevel,   
          Status:0,
          Age:2
        }
      }
      const res = await connrequest('GetDeviceHardware',data);
      res.Data = res.Data || []
      res.Data = res.Data.map(item => {
        item.TransTime = parseTime(item.TransTime)
        item.StartDate = item.StartDate ? formatTime3(item.StartDate) : '未知'
        item.generated_assets=item.DeviceName
        // item.generated_assets=item.PrimArea+"/"+item.SecondArea+"/"+item.SchoolName+"/"+item.DeviceName
        return item
      })
      this.tableData = res.Data
      // console.log(data,res,this.prevenData);
    },
  }
} 
</script>

<style lang="scss" scoped>
  .wrap{
    height: 360px;
    background: #fff;
  }

</style>
